<template>
  <div class="content">
    <div class="workbench">
      <div class="worktop border_style bg_style">
        <div class="workinput">
          <div style="margin-right:8px">
            <YsDatePicker style="width: 190px" class="search-input" type="datetime" :value="pege_param.start_bk_date" @on-change="pege_param.start_bk_date=$event" transfer placement="bottom-end"></YsDatePicker>
          </div>
          <div style="margin-right:8px">
            <YsDatePicker style="width: 190px" class="search-input" type="datetime" :value="pege_param.end_bk_date" @on-change="pege_param.end_bk_date=$event" transfer placement="bottom-end"></YsDatePicker>
          </div>
          <div>
            <YsButton type="primary" class="searchBtn" @click="getLogList()">查询</YsButton>
          </div>
        </div>
      </div>

      <div class="table-box">
        <proTable ref="proTableDom" class="table-st border_style bg_style" :loading="page.tableLoad" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="page.currentPage" :total="page.allTotal"
          :pageSize="page.pageSize">
        </proTable>
      </div>

      <pro-dialog class="add-serve" ref="logDetailDom" width="760" :nopadding="true" title="查看详情">
        <div class="model-box" style="padding: 0px 24px 24px 12px">
          <YsForm ref="formAppValidate" :label-width="120" :model="log_info">
            <YsRow :gutter="16">
              <YsCol span="12">
                <YsFormItem label="任务流水号：">
                  <YsInput :disabled="true" v-model="log_info.work_seq"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="12">
                <YsFormItem label="发起时间：">
                  <YsInput :disabled="true" v-model="log_info.time"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="12">
                <YsFormItem label="发起系统：">
                  <YsInput :disabled="true" v-model="log_info.resp_cn_name"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="12">
                <YsFormItem label="发起终端：">
                  <YsInput :disabled="true" v-model="log_info.ORG_TERM_NO"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="12">
                <YsFormItem label="发起渠道：">
                  <YsInput :disabled="true" v-model="log_info.ORG_CHANNEL_CODE"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="12">
                <YsFormItem label="发起用户：">
                  <YsInput :disabled="true" v-model="log_info.CRT_USER_ID"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="12">
                <YsFormItem label="响应系统：">
                  <YsInput :disabled="true" v-model="log_info.resp_cn_name"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="12">
                <YsFormItem label="响应服务器：">
                  <YsInput :disabled="true" v-model="log_info.PENDWK_BK_EXPL"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="12">
                <YsFormItem label="响应状态：">
                  <YsInput :disabled="true" :value="setval(log_info.SR_YN_FLAG)"></YsInput>
                </YsFormItem>
              </YsCol>
              <YsCol span="12">
                <YsFormItem label="部门：">
                  <YsInput :disabled="true" v-model="log_info.CRT_DEPT_CN_NAME"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="24">
                <YsFormItem label="服务名：">
                  <YsInput :disabled="true" v-model="log_info.service_name"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="24">
                <YsFormItem label="服务描述：">
                  <YsInput :disabled="true" v-model="log_info.LOG_TEXT"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <YsRow :gutter="16">
              <YsCol span="24">
                <YsFormItem label="服务地址：">
                  <YsInput :disabled="true" v-model="log_info.ORG_SRV_NAME"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
          </YsForm>
          <YsRow class="foot-btn" >
            <YsButton @click="goLogBack"  class="searchBtn" type="primary">确定</YsButton>
          </YsRow>
        </div>
      </pro-dialog>

    </div>

  </div>
</template>

<script>
import setTime from "../../utils/setTime";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "application",
  computed: {
    ...mapGetters(["getTabList", "getServiceStepList"]),
  },
  data() {
    return {
      log_info: {
        time: "",
        CRT_DEPT_CN_NAME: "",
        CRT_DEPT_ID: "",
        CRT_USER_CN_NAME: "",
        CRT_USER_ID: "",
        LOG_LEVEL: null,
        ORG_CHANNEL_CODE: "",
        ORG_RS_CODE: "",
        ORG_SRV_BK_DESC: "",
        ORG_SRV_NAME: "",
        ORG_TERM_NO: "",
        PENDWK_BK_EXPL: "",
        PEND_WORK_SEQ: "",
        SR_YN_FLAG: null,
        log_record: null,
        resp_cn_name: "",
        rs_cn_name: "",
        work_seq: "",

      },
      pege_param: {
        start_bk_date: setTime.getLastMonth().last,
        end_bk_date: setTime.getLastMonth().now,
        log_level: 1,
        start_recd: 0,
        limit_recd: 12,
        rs_code: "74"
      },

      formTop: {
        input1: "",
        input2: "",
      },
      page: {
        tableLoad: false,
        pickerDisabled: null,//判断是编辑还是查看详情
        subDetailBean: {}, //查看详情
        allTotal: 0,
        pageSize: 12,
        currentPage: 1,
        columns: [
          {
            // type: 'index',
            title: '序号',
            width: 80,
            align: 'center',
            tooltip: true,
            render: (h, params) => {
              let _this = this
              return h('span', params.index + (_this.page.currentPage - 1) * _this.page.pageSize + 1)
            }
          },
          {
            title: "时间",
            minWidth: 180,
            tooltip: true,
            render: (h, params) => {
              return h('Tooltip', {
                props: {
                  placement: 'bottom'
                }
              }, [
                `${params.row.CRT_BK_DATE} ${params.row.CRT_BK_TIME}`,
                h('span', { slot: 'content', style: { whiteSpace: 'normal', wordBreak: 'break-all' } }, `${params.row.CRT_BK_DATE} ${params.row.CRT_BK_TIME}`)
              ])

            }
          },
          {
            title: "发起系统",
            tooltip: true,
            minWidth: 100,
            key: "rs_cn_name",
          },
          {
            title: "用户",
            tooltip: true,
            minWidth: 80,
            key: "CRT_USER_CN_NAME",
          },
          {
            title: "部门",
            tooltip: true,
            width: 120,
            key: "CRT_DEPT_CN_NAME",
          },
          {
            title: "响应服务名",
            tooltip: true,
            minWidth: 120,
            key: "ORG_SRV_BK_DESC",
          },
          {
            title: "响应系统",
            tooltip: true,
            minWidth: 100,
            key: "resp_cn_name",
          },
          {
            title: "状态",
            width: 100,
            tooltip: true,
            key: "SR_YN_FLAG",

          },
          {
            title: "详情信息",
            width: 100,
            tooltip: true,
            key: "sub_duration",
            render: (h, params) => {
              let _this = this
              return h("div", {
                style: {
                  color: '#57a3f3',
                  cursor: 'pointer'
                },
                domProps: {
                  innerText: "查看详情"
                },
                on: {
                  click: (event) => {

                    _this.log_info = params.row
                    _this.log_info.time = `${params.row.CRT_BK_DATE} ${params.row.CRT_BK_TIME}`
                    _this.$refs.logDetailDom.show()
                    event.stopPropagation();
                  },
                }
              });
            },
          },
        ],
        data: [],

      },
    };
  },

  methods: {
    ...mapActions(['getQueryLgLogMfAll']),
    setval(item) {
      return item == 1 ? '成功' : '失败'
    },
    //获取服务列表
    getLogList() {
      let _this = this
      this.page.tableLoad = true
      _this.getQueryLgLogMfAll(this.pege_param).then(res => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false
        if (status === 'ok') {
          this.page.data = data.lgLogMfBeans
          this.page.allTotal = data.all_recd
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.page.tableLoad = false
        _this.$YsMessage.error('获取数据失败');
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page.currentPage = pageNum;
      this.pege_param.start_recd = (pageNum - 1) * this.page.pageSize;
      this.getLogList(this.pege_param)
    },
    //返回
    goLogBack() {
      this.log_info = this.$options.data().log_info
      this.$refs.logDetailDom.close()
    }
  },
  mounted() {
    this.getLogList()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  // padding: 0 18px;
  /deep/ .workRooter {
    p {
      color: #405680;
      font-size: 16px !important;
    }
  }
  .workbench {
    width: 100%;
    height: calc(100% - 28px);
    // padding: 18px;
    padding-bottom: 0;

    .worktop {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 72px;
      border: 1px solid #cfd7e5;
      border-radius: 4px;
      margin-bottom: 8px;

      .workright {
        margin-left: auto;
      }
      .workinput {
        display: flex;
      }
    }
    .dividing-right {
      .current {
        background: #0061ff !important;
        color: #fff !important;
      }
      margin-left: auto;
      .dividing-btn {
        width: 140px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #0061ff;
        opacity: 1;
        padding: 0;
        color: #0091ff;
        border-radius: 4px;
      }
      .dividing-btn2 {
        margin-left: 10px;
      }
    }
  }
  .table-box {
    width: 100%;
    height: calc(100% - 68px);
    // border: 1px solid #cfd7e5;
    border-radius: 4px;
    overflow: hidden;
    .table-st{
      border: 1px solid #cfd7e5;
    }
  }
}
.model-box {
  .icon-chain {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: 25px auto 0;

    background: rgba(0, 97, 255, 0.1);
    border: 1px solid #0061ff;
    opacity: 1;
    border-radius: 4px;
    .icon {
      font-size: 40px;
      color: #0061ff;
    }
  }
  .formconter {
    padding: 0 16px;
    /deep/.ivu-form-item {
      width: 100%;
    }
  }
}
/deep/.model-tabs {
  border: 1px solid #cfd7e5;
  border-radius: 2px;
  margin: 20px;
  .ivu-tabs-bar {
    background: #f5f7fa;
    border-bottom-color: transparent;
    margin-bottom: 22px;
  }
  .ivu-tabs-tabpane {
    background: transparent;
  }
  .ivu-input[disabled] {
    color: #405680;
  }
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
/deep/ .ivu-modal-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/deep/ .ivu-modal-close {
  right: 18px;
}
</style>
